<template>
  <div class="page-home">
    <div class="page-home__container">
      <RouterView />
    </div>
    <ul class="page-home__footer">
      <li>
        <RouterLink to="/films">
          <i class="iconfont icon-dianying1" :class="{ active: $route.name === 'films' }"></i>电影
        </RouterLink>
      </li>

      <li>
        <RouterLink to="/cinemas">
          <i class="iconfont icon-yingyuan" :class="{ active: $route.name === 'cinemas' }"></i>影院
        </RouterLink>
      </li>

      <li>
        <RouterLink to="/ad">
          <i class="iconfont icon-zixun" :class="{ active: $route.name === 'ad' }"></i>资讯
        </RouterLink>
      </li>

      <li>
        <RouterLink to="/center"><i class="iconfont icon-wode6" :class="{ active: $route.name === 'center' }"></i>我的
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.page-home {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.router-link-active,
.active {
  color: red !important;
}

.page-home__container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
}

.page-home__footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  border-top: 1px solid #dadada;
}

li a {
  color: #797d82;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 10px;
}

li {
  width: 100px;
}

li img {
  width: 21px;
  height: 21px;
}

.iconfont {
  font-size: 21px !important;
  color: #797d82;
}
</style>
